<article class="module-msg">
    <div class="layout-content-box">
        <div class="ui-account-box">
            <div class="m-tab-sub fn-mb20">
                <p class="ui-title">{{ $t('message.myMessages') }}</p>
                <ul class="list fn-clearfix">
                    <li class="item">
                        <span>{{ $t('message.type') }}：</span>
                    </li>
                    <li class="item">
                        <a class="item-link"
                           :class="{'item-link--active': type==='total'}"
                           href="#/message/total">
                            <span class="tab-text">{{ $tc('message.typeOption', 0) }} <i class="triangle"></i></span>
                        </a>
                    </li>
                    <li class="item">
                        <a class="item-link"
                           :class="{'item-link--active': type==='asset'}"
                           href="#/message/asset">
                            <span class="tab-text">{{ $tc('message.typeOption', 1) }}<i class="triangle"></i></span>
                        </a>

                    </li>
                    <li class="item">
                        <a class="item-link"
                           :class="{'item-link--active': type==='safe'}"
                           href="#/message/safe">
                            <span class="tab-text">{{ $tc('message.typeOption', 2) }}<i class="triangle"></i></span>
                        </a>

                    </li>
                </ul>
            </div>
            <div class="message">
                <article class="module-message module-message--total">
                    <ul class="module-message-content">
                        <li class="message_cont_box" v-for="item in list">
                            <span class="bg-color"
                                  :class="{'bg-orange': item.item_name===$tc('message.typeOption', 2)}"
                            >{{item.item_name}}</span>
                            <span class="time">{{item.item_time | timezone}}</span>
                            <div class="cont_box_txt">{{item.item_txt | textFilter}}</div>
                        </li>
                    </ul>
                    <loading v-if="isLoading === true"></loading>
                    <no-data v-if="isLoading === false && list && list.length === 0"></no-data>
                    <pager :page-no.sync="pageNo"
                           :on-page-change="changePage"
                           :page-num="pageNum"></pager>
                </article>
                <!--<p v-if="type=='safe'">safe</p>-->
                <!--<p v-if="type=='asset'">asset</p>-->
            </div>
        </div>
    </div>
</article>